var MyComponent = require('./my-component.vue');
<template>
    <div class="user-row">
        <input id="user" type="text" placeholder="输入手机号码" v-model='telephone' maxlength="11">
        <button :class="['security-code',isget?'gray':'']" @click="getCode">获取验证码</button>
    </div>
    <div class="user-row">
        <input id="code" type="text" placeholder="输入验证码" value="">
        <i class="time-set">{{timeSet}}</i>
    </div>
    <div class="user-row">
        <input id="pwd" type="password" placeholder="输入密码" value="" maxlength="30">
    </div>
    <div class="error-info">{{errorInfo}}</div>
    <button :class="['submit',isdefault?'gray-back':'register']">注册</button>
    <div class="do-other">
        <a href="./login.html">已有帐号，去登录</a>
    </div>
</template>
<style lang="less" src="../less/user.less">
</style>
<script>
    export default{
        data() {
            return {
                registerUrl: "/farm/api.go?action=phoneRegister&code=register&phone=phoneNumber&password=pwdValue&captcha=codeValue&deviceType=deviceValue",
                getCodeUrl: "/farm/api.go?action=getPhoneCapter&phone=phoneNumber&code=register",
                isdefault: true,
                isget: false,
                telephone: "",
                errorInfo: "",
                timeSet:"60S"
            }
        },
        methods: {
            getCode() {
                if (this.telephone == "" || this.telephone.length !=11) {
                    this.errorInfo = "请输入正确的手机号";
                    return;
                }
                if(this.isget) return;
                //倒计时
                this.isget = true;
                var count = 60,
                    loop = setInterval(()=> {
                        this.timeSet = count-- + "S";
                        if (count == 0) {
                            this.timeSet = "60S";
                            this.isget = false;
                            clearInterval(loop);
                        }
                    }, 1000);
                this.$http.get(this.getCodeUrl.replace("phoneNumber", this.telephone)).then(function(response) {
                    if (response.status.code == 0) {
                        this.errorInfo = "验证码已发到您的手机";
                    } else {
                        this.errorInfo = response.status.message;
                    }
                }, function(res) {
                    this.errorInfo = res;
                })
            }
        },
        watch: {
            'telephone': function(value) {
                if (value.length > 11 || /\D/.test(value)) {
                    this.errorInfo = "请输入正确的手机号";
                } else {
                    this.errorInfo = "";
                }
            }
        }
    }
</script>
